<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue验证</title>
    <script src="../js/vue.js"></script>
    <script>
        function pointTo(element , e) {
            var elementBox = element.getBoundingClientRect();
            return {
                x: e.clientX - elementBox.left ,
                y: e.clientY - elementBox.top
            };
        }
        /*计算元素左上角的坐标*/
        function startPoint(element) {
            var x = 0, y = 0;
            while(element !=null){
                x +=element.offsetLeft;
                y +=element.offsetParent();
            }
            return {
                x:x,
                y:y
            }
        }
        /*计算元素的宽度和高度（不要认为是width和height 新手特别容易犯错）*/
        // offsetHeight 与 offsetWidth

        /*
        * option参数
        * obj:运动的对象
        * speed:运动的持续时间
        * changeStyel:改变的属性，这里可能多个所以采用函数方式（可选）
        * callback:回调函数（可选）*/
        function animation(options) {
            if (!options.obj) {
                return false;
            }
            //设置默认持续时间
            options.speed = option.speed || '.5s';
            options.obj.style.transform = "all" + options.speed + "ease-in-out";
            options.changeStyle.call(options.obj);
            var flag=false;
            options.obj.addEventListener('transitionend', function () {
                //这里主要由于transitionend在每个属性的动画执行完多会走一遍，所以我们要让它只执行一次
                if(!flag){
                    options.callback && options.calback();
                }
            })
        }
        /*得到元素的运动方向*/
        function getDirection(element, startPoint, pagePoint) {
            var halfwWidth=element.offsetWidth/2, halfHeight=element.offsetHeight/2;
            //得到中心点
            var center={
                x:startPoint.x+halfWidth,
                y:startPoint.y+halfHeight
            }
            //得到鼠标偏离中心点的距离
            var disX=pagePoint.x-center.x;
            var dixY=pagePoint.y-center.y;
            if(disY<0&&Math.abs(disY/disX)>=1){
                //上方
                return 1;
            }
            else if(disY >0 &&Math.abs(disY/disX)>=1){
                //下
                return 2;
            }
            else if(disX<0&&Math.abs(disY/disX)<1){
                //左
                return 3;
            }else {
                //右
                return 4;
            }
        }
    </script>
</head>
<body>
<ul>
    <!--li作为鼠标移入（mouseenter）和鼠标移出（mouseleave）的载体-->
    <!--div作为动画执行的载体-->
    <li>
        <div class="bg">
            <p>JS</p>
        </div>
    </li>
</ul>
</body>
</html>